<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 
        定位：position static(默认值) relative(相对定位)
        定位后：元素脱离文档流(absolute)；
                可以使用属性left,right,top,bottom进行偏移；没有添加定位或者position为static的元素不能够设置left,right,top,bottom
                z-index: ;层级
        */
        .out-box {
            width: 300px;
            height: 1000px;
            background-color: blanchedalmond;
            margin: 50px;
            position: relative;
        }

        .out-box>div {
            width: 100px;
            height: 100px;
        }

        .inner-box1 {
            background-color: salmon;
            /* 默认值 static 静态定位*/
            /* position: static; */
            /* 相对定位 相对于自己本身的位置进行，向左，向右，向上或者向下偏移*/
            position: relative;
            left: 20px;
            top: 40px;
        }

        .inner-box2 {
            background-color: chocolate;
            position: relative;
            right: 20px;
            bottom: 10px;
        }

        .inner-box3 {
            background-color: lightslategray;
        }

        /* 子绝父相 */
        .inner-box4 {
            /* 绝对定位 相对于根元素或者离自己最近的有定位属性(relative/absolute)的元素进行定位 */
            position: absolute;
            /* left: 30px;
            top: 10px; */
            right: 30px;
            bottom: 10px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="out-box">
        <div class="inner-box1">1</div>
        <div class="inner-box2">222222222222</div>
        <div class="inner-box3">3</div>
        <div class="inner-box4">4</div>
        <div class="inner-box5">5</div>
    </div>
</body>

</html>